<style lang='less' scoped>
#box {
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  li {
    list-style: none;
  }
  img {
    width: 200px;
    height: 200px;
  }
  .goods_nav {
    width: 630px;
    display: flex;
    justify-content: space-between;
    li {
      width: 100px;
      height: 50px;
      text-align: center;
      border: 1px solid;
      line-height: 50px;
    }
  }
  .goods {
    width: 630px;
    display: flex;
    flex-wrap: wrap;
    div{
      margin: 3px;
    }
  }
  .car {
    img {
      width: 100px;
      height: 100px;
    }
    ul {
      width: 605px;
      li {
        height: 100px;
        display: flex;
        justify-content: space-between;
        line-height: 100px;
        input {
          width: 30px;
          height: 30px;
          margin-top: 35px;
        }
        button {
          width: 50px;
          height: 30px;
          margin-top: 35px;
        }
        div {
          button {
            width: 25px;
            height: 25px;
          }
          .num {
            width: 30px;
            height: 25px;
            background-color: aquamarine;
          }
        }
      }
    }
  }
}
</style>
<template>
  <div id="box">
    <ul class="goods_nav">
      <li v-for="(item, index) in navData" :key="index" @click="nav(index)">
        {{ item }}
      </li>
    </ul>
    <div class="goods">
      <div
        v-for="item in typeData"
        :key="item.id"
        @click="addCar(item)"
        @mouseenter="touch($event)"
        @mouseleave="stopTouch($event)"
      >
        <img :src="item.g_img" alt="" />
        <p>{{ item.g_introduction }}</p>
        <span>{{ item.g_price | fn() }}</span>
        <!-- <img src="../assets/空调1.png" alt=""> -->
      </div>
    </div>
    <div class="car">
      <div>
        <label
          >全选<input type="checkbox" v-model="statusAll" @click="all()"
        /></label>
        <span>总价:{{ priceAll | fn() }}</span>
      </div>
      <ul>
        <li v-for="item in carData" :key="item.id">
          <input
            type="checkbox"
            :checked="item.status"
            @click="inp_fn(item.id)"
          />
          <img :src="item.img" alt="" />
          <span>{{ item.introduction }}</span>
          <span>{{ item.price | fn() }}</span>
          <div>
            <button @click="minus(item.id)">-</button>
            <!-- 输入 -->
            <input class="num" type="text" v-model.number.lazy="item.num" />
            <!-- 添加购物车 -->
            <button @click="item.num++">+</button>
          </div>
          <button @click="delCar(item.id)">删除</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      statusAll: false, //全选
      nav_show: 0, //标签栏
      navData: ["空调", "平板电视", "生活电器", "洗衣机", "冰箱", "厨房大电"],
      goodsData: [
        {
          g_id: 0,
          g_type: 0,
          g_name: "美的空调",
          g_img:
            "https://pic.rmb.bdstatic.com/bjh/241205/dump/bc78176045036df8ff55f177b51f8c52.png",
          g_price: 1299,
          g_introduction: "凉爽你的夏天",
        },
        {
          g_id: 1,
          g_type: 0,
          g_name: "xiaomi空调",
          g_img:
            "https://pic.rmb.bdstatic.com/bjh/241205/dump/bc78176045036df8ff55f177b51f8c52.png",
          g_price: 3599,
          g_introduction: "凉爽你的夏天",
        },
        {
          g_id: 2,
          g_type: 0,
          g_name: "格力空调",
          g_img:
            "https://pic.rmb.bdstatic.com/bjh/241205/dump/bc78176045036df8ff55f177b51f8c52.png",
          g_price: 3599,
          g_introduction: "凉爽你的夏天",
        },
        {
          g_id: 3,
          g_type: 0,
          g_name: "空调",
          g_img:
            "https://pic.rmb.bdstatic.com/bjh/241205/dump/bc78176045036df8ff55f177b51f8c52.png",
          g_price: 3599,
          g_introduction: "凉爽你的夏天",
        },
        {
          g_id: 4,
          g_type: 1,
          g_name: "华为平板",
          g_img:
            "https://doc-fd.zol-img.com.cn/t_s2000x2000/g7/M00/05/09/ChMkK2e34yaIS_GCAADApf_Ykd8AApL9QFCvncAAMC9336.jpg",
          g_price: 1299,
          g_introduction: "pingban1",
        },
        {
          g_id: 5,
          g_type: 2,
          g_name: "热水壶",
          g_img:
            "https://q2.itc.cn/images01/20240820/c4eca0d50aae4f02a135e979c9b0b99c.png",
          g_price: 49,
          g_introduction: "生活电器",
        },
        {
          g_id: 6,
          g_type: 3,
          g_name: "洗衣机",
          g_img:
            "https://img0.baidu.com/it/u=2642351825,1807041009&fm=253&app=138&f=JPEG?w=760&h=760",
          g_price: 1499,
          g_introduction: "洗衣机",
        },
        {
          g_id: 7,
          g_type: 4,
          g_name: "冰箱",
          g_img:
            "https://pic.rmb.bdstatic.com/bjh/240723/dump/f3cbcd2eaa5805bbc136fb43404b0c93.jpeg",
          g_price: 1499,
          g_introduction: "洗衣机",
        },
        {
          g_id: 8,
          g_type: 5,
          g_name: "抽烟机",
          g_img:
            "https://k.sinaimg.cn/n/sinakd20110/116/w748h968/20240122/ef70-f16f7b2cb8a131611ed2e0cb5fffb6a2.jpg/w700d1q75cms.jpg",
          g_price: 1499,
          g_introduction: "抽烟机",
        },
      ],
      carData: [],
      typeData: [
        {
          g_id: 0,
          g_type: 0,
          g_name: "美的空调",
          g_img:
            "https://pic.rmb.bdstatic.com/bjh/241205/dump/bc78176045036df8ff55f177b51f8c52.png",
          g_price: 1299,
          g_introduction: "凉爽你的夏天",
        },
        {
          g_id: 1,
          g_type: 0,
          g_name: "xiaomi空调",
          g_img:
            "https://pic.rmb.bdstatic.com/bjh/241205/dump/bc78176045036df8ff55f177b51f8c52.png",
          g_price: 3599,
          g_introduction: "凉爽你的夏天",
        },
        {
          g_id: 2,
          g_type: 0,
          g_name: "格力空调",
          g_img:
            "https://pic.rmb.bdstatic.com/bjh/241205/dump/bc78176045036df8ff55f177b51f8c52.png",
          g_price: 3599,
          g_introduction: "凉爽你的夏天",
        },
        {
          g_id: 3,
          g_type: 0,
          g_name: "空调",
          g_img:
            "https://pic.rmb.bdstatic.com/bjh/241205/dump/bc78176045036df8ff55f177b51f8c52.png",
          g_price: 3599,
          g_introduction: "凉爽你的夏天",
        },
      ],
    };
  },
  methods: {
    nav(index) {
      console.log();
      // this.nav_show = index;
      this.typeData = this.goodsData.filter((item) => item.g_type == index);
    },
    // 添加到购物车
    addCar(item) {
      if (this.carData.find((i) => i.name == item.g_name) == undefined) {
        this.carData.push({
          id: this.carData.length,
          name: item.g_name,
          img: item.g_img,
          price: item.g_price,
          introduction: item.g_introduction,
          status: false,
          num: 1,
        });
      } else {
        this.carData.find((i) => i.name == item.g_name).num++;
      }
    },
    // 数量减
    minus(id) {
      if (this.carData.find((i) => i.id == id).num > 1) {
        this.carData.find((i) => i.id == id).num--;
      }
    },
    // 删除
    delCar(id) {
      this.carData.splice(this.carData.findIndex((i) => i.id == id));
    },
    all() {
      this.statusAll = !this.statusAll;
      this.carData.map((i) => (i.status = this.statusAll));
    },
    // 反选
    inp_fn(id) {
      this.carData.find((i) => i.id == id).status = !this.carData.find(
        (i) => i.id == id
      ).status;
      this.statusAll = this.carData.every((i) => i.status == true);
    },
    // 触摸商品
    touch($event) {
      $event.target.style.border = "1px red solid";
    },
    stopTouch($event) {
      $event.target.style.border = "";
    },
  },
  computed: {
    // 总价
    priceAll() {
      let arr = this.carData.filter((i) => i.status == true);
      return (
        arr.reduce((a, b) => {
          return a + b.num;
        }, 0) *
        arr.reduce((a1, b1) => {
          return a1 + b1.price;
        }, 0)
      );
    },
  },
  filters: {
    fn(i) {
      return "$" + i;
    },
  },
  mounted() {},
};
</script>